<template>
  <c-view>
    <template v-slot:header>
      <div class="title">
        {{ $route.meta.title }}
      </div>
    </template>
    <div class="main__box">
      <c-table
        ref="cTable"
        selection
        hasBorder
        :max-height="maxHeight"
        :size="size"
        :loading="isLoading"
        :table-header="tableHeader"
        :table-list="tableList"
        :table-inner-btns="tableInnerBtns"
        :page-info="pageInfo"
        @change-pagination="changePagination"
      >
        <template v-slot:header>
          <c-search :form-model="searchObj" :form-items="searchItems" @submit-form="searchSubmit" @reset-form="searchReset">
            <template v-slot:btn>
              <el-button type="primary" :size="size" @click="queryDueList">欠款会员</el-button>
            </template>
          </c-search>
        </template>
      </c-table>
    </div>
    <div v-if="dialogObj.isShow">
      <c-dialog
        class="dialog-box"
        :is-show="dialogObj.isShow"
        :title="dialogObj.title"
        close-btn
        @before-close="dialogObj.isShow = false"
        @on-submit="dialogConfirm"
      >
        <el-form ref="formRef" :model="formModel" :rules="rules" label-width="120px" class="form" label-position="right" status-icon>
          <el-form-item label="冻结原因" prop="blockingReason">
            <el-input
              type="textarea"
              :rows="4"
              maxlength="100"
              show-word-limit
              placeholder="请输入冻结原因"
              v-model.trim="formModel.blockingReason"
            ></el-input>
          </el-form-item>
        </el-form>
      </c-dialog>
    </div>
  </c-view>
</template>

<script>
import mixinTable from 'mixins/table'
// import dictObj from '@/store/dictData'
import CDialog from 'components/dialog'
import utils from 'utils'

export default {
  name: 'memberAccount',
  mixins: [mixinTable],
  components: {
    CDialog
  },
  data(vm) {
    return {
      debit: '', // 欠费查询条件
      dialogObj: {},
      formModel: {
        blockingReason: ''
      },
      rules: {
        blockingReason: [{ required: true, message: '冻结原因不能为空', trigger: 'blur' }]
      },
      tableInnerBtns: [
        {
          name: '冻结资金',
          icon: 'el-icon-lock',
          width: 100,
          notBtn: row => row.moneyStatus === '5',
          handle(row) {
            vm.showDialog({
              title: '冻结原因',
              initData: {
                customerId: row.customerId,
                moneyStatus: '5'
              }
            })
          }
        },
        {
          name: '解冻资金',
          icon: 'el-icon-unlock',
          notBtn: row => row.moneyStatus === '0',
          handle(row) {
            vm.confirmTip('确定解冻', () => {
              vm.operateMoney({
                customerId: row.customerId,
                moneyStatus: '0'
              })
            })
          }
        }
      ],
      // 表格内操作按钮
      tableHeader: [
        // {
        //   label: '所属城市',
        //   prop: 'cityName'
        // formatter(row) {
        //   return row && vm.setTableColumnLabel(row.cityCode, 'cityList')
        // },
        // search: {
        //   type: 'dict',
        //   optionsList: dictObj.cityList
        // }
        // },
        // {
        //   label: '头像',
        //   prop: 'portraitUrl',
        //   isImage: true
        // },
        {
          label: '姓名',
          prop: 'name',
          fixed: true,
          width: 100,
          search: {
            type: 'input'
          }
        },
        {
          label: '性别',
          prop: 'sex',
          width: 100,
          formatter: row => row && vm.setTableColumnLabel(row.sex, 'genderSelect')
        },
        {
          label: '手机号码',
          prop: 'phone',
          width: 110,
          formatter: row => row && utils.hidePhoneNum(row.phone),
          isPopover: true,
          search: {
            type: 'input'
          }
        },
        {
          label: '资金状态',
          prop: 'moneyStatus',
          width: 100,
          formatter: row => row && vm.setTableColumnLabel(row.moneyStatus, 'moneyStatus')
        },
        {
          label: '押金(元)',
          prop: 'deposit',
          width: 100
        },
        {
          label: '已用额度(元)',
          prop: 'totalConsumeMoney',
          width: 120
        },
        {
          label: '总充值金额(元)',
          prop: 'totalRechargemoney',
          width: 120
        },
        {
          label: '总退款金额(元)',
          prop: 'totalRefundMoney',
          width: 120
        },
        {
          label: '赠送余额(元)',
          prop: 'giftMoney',
          width: 120
        },
        {
          label: '冻结原因',
          prop: 'blockingReason'
        }
      ]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    /*
     * 查询表格列表数据
     */
    fetchData() {
      const { pageNo, pageSize } = this.pageInfo
      const { dateTime, ...other } = this.searchObj
      const searchDate = this.getSearchDate(dateTime, 'dateTime')
      this.isLoading = true
      this.$api.member
        .fetch('memberCardList', {
          debit: this.debit,
          ...searchDate,
          ...other,
          rows: pageNo,
          offset: pageSize
        })
        .then(res => {
          this.isLoading = false
          if (res && res.totalCount) {
            const { data, totalCount } = res
            data.forEach(res => {
              res.deposit = utils.formatMoney(res.deposit)
              res.totalConsumeMoney = utils.formatMoney(res.totalConsumeMoney)
              res.totalRechargemoney = utils.formatMoney(res.totalRechargemoney)
              res.totalRefundMoney = utils.formatMoney(res.totalRefundMoney)
              res.giftMoney = utils.formatMoney(res.giftMoney)
            })
            this.pageInfo.totalNum = totalCount
            this.tableList = data || []
          } else {
            this.tableList = res || []
          }
        })
    },
    // 查询欠费会员信息
    queryDueList() {
      this.debit = 'debit'
      this.submitHandle()
    },
    // 重置查询条件
    searchReset() {
      this.debit = ''
      this.submitHandle()
    },
    // 确认查询
    searchSubmit() {
      this.debit = ''
      this.submitHandle()
    },
    // 查询执行函数
    submitHandle() {
      this.pageInfo.pageNo = 1
      this.fetchData()
      this.$refs.cTable && this.$refs.cTable.resetScroll()
    },
    //解冻、冻结账户
    operateMoney(options) {
      console.log(options.moneyStatus)
      this.$api.member.fetch('memberCardFrozenThaw', options).then(() => {
        // this.dialogObj.isShow = false
        // this.tableList[index].moneyStatus = other.moneyStatus
        this.responeHandle(options.moneyStatus === '5' ? '冻结成功' : '解冻成功')
      })
    },
    /**
     * 对话框确认按钮，集成了表单提交功能
     */
    dialogConfirm() {
      const childRef = this.$refs.formRef
      console.log(this.$refs.formRef)
      childRef.validate(valid => {
        if (valid) {
          const { blockingReason } = this.formModel
          const { customerId, moneyStatus } = this.dialogObj.initData
          this.operateMoney({
            customerId,
            moneyStatus,
            blockingReason
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 显示对话框
    showDialog(opts) {
      this.dialogObj = {
        isShow: true,
        title: opts.title,
        initData: opts.initData
      }
      this.formModel.blockingReason = ''
    }
  }
}
</script>
